import React, { useLayoutEffect, useMemo, useRef } from "react";
import { ResourceList } from "../../Component/ResourceList";
import { FormattedMessage, useIntl } from "react-intl";
import { LibAppView } from "@/lib";
import { Button, App, Tag } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useDelete } from "../../hooks/useDelete";
import lodash from "lodash";
import { AdminRight } from "@/pages/Admin/data/AdminPageAuth";

const ScoolList = LibAppView.withService({
    reqEndPoints: [{
        endPoint: "setting.configList",
        name: "category",
        uri: { config: "schoolType" }
    }]
})((props) => {
    const microApp = LibAppView.useMicroApp();
    const imgPrefix = props.withServiceApi.getUrl("resource.mediaUrl");
    const listRef = useRef<any>();
    const categoryList = useMemo(() => {
        const specialTypeData =  lodash.get(props.responseData, "category.data", []);
        return specialTypeData.map((item: any) => ({
            label: item.dataValue,
            value: item.name
        }));
    }, [props.responseData]);
    const deleteAction = useDelete({
        endPoint: "resource.editSchool",
        cancelEndPoint: "resource.editSchool",
        data: {},
        listRef
    });
    const columns = useMemo(() => ([{
        title: "学校名称",
        dataIndex: "name",
    }, {
        title: "类型",
        dataIndex: "typeTitle",
        width: 100
    }, {
        title: "封面",
        dataIndex: "cover",
        width: 80,
        render: (cover: string, data: any) => {
            if(typeof cover === "string" && cover.length > 0) {
                const url = /^http[s]{0,1}:\/\//.test(cover) ? cover : imgPrefix + "/" + cover;
                return <img style={{maxWidth: 80}} src={url} alt={data.title}/>
            } else {
                return <></>;
            }
        }
    },{
        title: "省份",
        dataIndex: "provinceTitle",
        width: 80
    },{
        title: "城市",
        dataIndex: "cityTitle",
        width: 80
    },{
        title: "地区",
        dataIndex: "areaTitle",
        width: 80
    },{
        title: "状态",
        dataIndex: "status",
        width: 80,
        render: (status: number) => {
            return (<>
                { status === 1 && <Tag color="green"><FormattedMessage id="admin.pages.article.edit.status.enable"/></Tag> }
                { status === 0 && <Tag color="error"><FormattedMessage id="admin.pages.article.edit.status.disable"/></Tag> }
            </>);
        }
    },{
        title: <FormattedMessage id="admin.pages.operate.edit" />,
        dataIndex: "name",
        render: (name: string, data: any) => {
            return (<>
                <AdminRight authRight="editable" mode="disabled">
                    <Button size="small" onClick={()=>{
                        microApp.startJourney("editDetails", {
                            state: data
                        });
                    }}>
                        <FormattedMessage id="admin.pages.operate.edit"/>
                    </Button>
                </AdminRight>
                <AdminRight authRight="editable" mode="disabled">
                    <Button size="small" onClick={() => {
                        deleteAction.cancel({
                            ...data,
                            status: 0
                        })
                    }}>
                        <FormattedMessage id="admin.pages.operate.cancel" />
                    </Button>
                </AdminRight>
                <AdminRight authRight="deleteable" mode="disabled">
                    <Button size="small" onClick={() => {
                        deleteAction.delete({
                            ...data,
                            status: -1
                        });
                    }}><FormattedMessage id="admin.pages.operate.delete"/></Button>
                </AdminRight>
            </>);
        }
    }]), []);
    const searchFields = useMemo<Admin.IAdvancedField[]>(() => ([{
        label: "标题",
        name: "title",
        type: "Input"
    }, {
        label: "类别",
        name: "category",
        type: "Select",
        data: categoryList || []
    }]), []);
    useLayoutEffect(() => {
        microApp.registeJourney({
            name: "editDetails",
            title: "Edit category",
            stepJourney: true,
            isTempJourney: true,
            steps: [{
                isMemoryPage: true,
                page: "admin.schoolEdit"
            }]
        });
    },[]);
    return (
        <ResourceList
            refApi={listRef}
            tableColumns={columns}
            searchFields={searchFields}
            tableWidth={800}
            listEndPoint={{
                endPoint: "resource.schoolList",
                formatResponse: (resp: any) => {
                    const listData: any[] = resp.data || [];
                    return listData.map((item: any) => {
                        const categoryData = categoryList.find((item2: any) => item2.value === item.type);
                        return {
                            ...item,
                            typeTitle: categoryData?.label || "未知",
                        };
                    });
                }
            }}
            Operators={() => {
                return (<AdminRight authRight="editable" mode="disabled">
                    <Button type="primary" onClick={() => {
                        microApp.startJourney("editDetails");
                    }}>
                        <PlusOutlined />
                        <span><FormattedMessage id="admin.pages.operate.add" /></span>
                    </Button>
                </AdminRight>);
            }}
        />
    );
});

export default ScoolList;
